<template>
  <div class="app-container">
    <h4 class="form-header h4">修改人员</h4>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-left:24px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="18" :md="12" :lg="6">
          <el-form-item label="名称" prop="employeeName">
            <el-input v-model="form.employeeName" placeholder="请输入名称" :disabled="disableInput" />
          </el-form-item>
          <el-form-item label="证件号码" prop="employeeIdCard">
            <el-input v-model="form.employeeIdCard" placeholder="请输入身份证号" :disabled="disableInput" />
          </el-form-item>
          <el-form-item label="联系电话" prop="employeePhone">
            <el-input v-model="form.employeePhone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="机构层级" prop="employeeAgency">
                <el-select v-model="form.employeeAgency" placeholder="机构层级" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_employee_agency" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="辅警类型" prop="employeeType">
                <el-select v-model="form.employeeType" placeholder="辅警类型" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_employee_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="归属部门" prop="deptId">
            <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门" @input="deptIdChange" :disabled="disableInput" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-radio-group v-model="form.employeeSex" :disabled="disableInput">
                  <el-radio v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历">
                <el-select v-model="form.employeeEducation" placeholder="学历" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_employee_education" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="政治面貌">
                <el-select v-model="form.employeePolitics" placeholder="政治面貌" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_employee_politics" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍地址">
                <el-select v-model="form.employeeDomicile" placeholder="户籍地址" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_employee_domicile" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="招聘类型">
                <el-select v-model="form.employeeRecruitType" placeholder="招聘类型" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_recruit_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招聘批次">
                <el-select v-model="form.employeeRecruitBatch" placeholder="招聘批次" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_recruit_batch" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="招聘日期" prop="employeeRecruitDate">
            <el-date-picker v-model="form.employeeRecruitDate" type="date" placeholder="招聘日期" value-format="yyyy-MM-dd" style="width:333px;" :disabled="disableInput">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item label="紧急联系" prop="employeeEmergency">
            <el-input v-model="form.employeeEmergency" placeholder="请输入紧急联系人" />
          </el-form-item>
          <el-form-item label="紧急电话" prop="employeeEmergencyPhone">
            <el-input v-model="form.employeeEmergencyPhone" placeholder="请输入紧急联系人电话" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">保 存</el-button>
            <el-button @click="close()">返 回</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <!-- <div style="border:solid 1px red;">明细</div> -->
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import { getEmployee, updateEmployee } from '@/api/employee/list';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'employee-list-edit',
  dicts: ['sys_user_sex', 'emp_employee_status', "emp_employee_education", "emp_employee_politics", "emp_employee_domicile", "emp_recruit_type", "emp_recruit_batch",
    "emp_employee_agency", "emp_employee_type"],
  components: { Treeselect },
  data() {
    var chekcPhone = (rule, value, callback) => {
      let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      if (!value) {
        return callback(new Error('联系电话不能为空'));
      } else if (!reg.test(value)) {
        return callback(new Error('联系电话格式不正确'));
      } else {
        callback()
      }
    };
    let idCardValidity = (rule, code, callback) => {
      var city = {
        11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽",
        35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ",
        61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 "
      };
      var tip = ""
      var pass = true

      if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
        tip = "身份证号格式错误"
        pass = false;
      } else if (!city[code.substr(0, 2)]) {
        tip = "地址编码错误"
        pass = false
      } else {
        // 18位身份证需要验证最后一位校验位
        if (code.length === 18) {
          code = code.split('')
          // 加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          // 校验位
          var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
          var sum = 0
          var ai = 0
          var wi = 0
          for (var i = 0; i < 17; i++) {
            ai = code[i]
            wi = factor[i]
            sum += ai * wi
          }
          var last = parity[sum % 11];
          if (parity[sum % 11] != code[17]) {
            tip = "校验位错误"
            pass = false
          }
        }
      }
      if (!pass) {
        callback(new Error(tip))
      } else {
        callback()
      }
    };
    return {
      // 部门树选项 修改前
      deptOptions: undefined,
      // 部门树选项 修改后
      deptOptions: [],
      disableInput: false,
      form: {},
      rules: {
        employeeName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        employeePhone: [{ required: true, validator: chekcPhone, trigger: 'blur' }],
        employeeIdCard: [{ required: true, validator: idCardValidity, trigger: 'blur' }],
        deptId: [{ required: true, message: "归属部门不能为空", trigger: "change" }],
        employeeAgency: [{ required: true, message: "机构层级不能为空", trigger: "change" }],
        employeeType: [{ required: true, message: "辅警层级不能为空", trigger: "change" }],
      }
    };
  },
  created() {
    this.getDeptTree();
    const employeeId = this.$route.params && this.$route.params.employeeId;
    getEmployee(employeeId).then(response => {
      this.form = response.data;
      // 审核中与已审核禁用标识
      if (this.form.auditStatus == 1 || this.form.auditStatus == 2) {
        this.disableInput = true;
      }
    });
  },
  mounted() { },

  methods: {
    // deptId变化
    deptIdChange(val) {
      this.$nextTick(() => {
        this.$refs.form.validateField('deptId');
      })
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          updateEmployee(this.form).then(response => {
            this.$modal.msgSuccess('修改成功');
            this.close();
          });
        }
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: '/employee/list' };
      this.$tab.closeOpenPage(obj);
    }
  }
};
</script>

<style scoped>
</style>